<template>
  <div id="member-transfer-integral">
    <c-title :text="loveByMember?`${point_name}转化${love}`:text"></c-title>
    <div class="main">
      <p class="current_integral">当前{{point_name}}：{{credit1}}</p>
      <div class="popup">
        <p class="left f-13">转化{{point_name}}</p>
        <van-field v-model="transfer_point" placeholder="0.00" />
        <div class="line"></div>
        <div class="tips">
          <p v-if="loveByMember">例如：{{transfer_integral}}{{point_name}}等于{{transfer_integral_love}}{{love}}</p>
          <p v-else>例如：{{transfer_integral}}{{point_name}}等于{{transfer_integral_ratio}}{{integral_name}}</p>
          <p class="c-9B9B9B" v-if="loveByMember">注：转化比例{{transfer_integral}}：{{transfer_integral_love}}，您的实际到账数为{{practical_num}}</p>
          <p class="c-9B9B9B" v-else>注：转化比例{{transfer_integral}}：{{transfer_integral_ratio}}，您的实际到账数为{{practical_num}}</p>
        </div>
        <div class="btn">
          <van-button  :disabled="loading" :loading="loading" block color="#F24E4E" @click="submit">确认转化</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      toi: this.fun.getKeyByI(),
      text: "",
      transfer_point: '',
      loading:false,
      credit1: "",
      point_name: "",
      integral_name: "",
      transfer_integral_ratio: 0,
      loveByMember:0, //是否开启积分手动转爱心值
      transfer_integral:0, //积分
      transfer_integral_love:0, //爱心值
      exchange_num:0, //转换的积分
      love:''
    };
  },
  computed:{
    practical_num(){
      if(this.transfer_point>0){
        let res = 0,
          value = 0;
        if(this.loveByMember) {
          res = this.transfer_integral_love/this.transfer_integral;
        } else {
          res = this.transfer_integral_ratio/this.transfer_integral;
        }
        value = Math.floor(res * Math.pow(10, 10)) / Math.pow(10, 10) * this.transfer_point;
        return Math.floor(value * Math.pow(10, 2)) / Math.pow(10, 2);
      }else{
        return 0;
      }
    }
  },
  activated() {
    let basic_info = JSON.parse(localStorage.getItem("yz_basic_info"));
    this.love = basic_info.love;
    let query = this.$route.query;
    let {loveByMember} = {...query};
    this.loveByMember = Number(loveByMember);
    // console.log(this.loveByMember);
    if(loveByMember){
      this.getLoveData();
    }else{
      this.getData();
    }
    // this.loveByMember?this.getLoveData():'';
  },
  methods: {
    getData() {
      $http.post("finance.point-transfer-integral.page-per").then(res => {
        if(res.result == 1){
          let data = res.data;
          this.credit1=data.credit1;
          this.point_name=data.point_name;
          this.integral_name=data.integral_name;
          this.transfer_integral=data.transfer_point_ratio;
          this.transfer_integral_ratio=data.transfer_integral_ratio;
          this.text = data.point_name +'转化'+data.integral_name;
        }else{
          this.$dialog.alert({ message: res.msg });
        }
      });
    },
    getLoveData() {
      $http
        .get(
          "finance.point-page.index",
          {
            i: this.fun.getKeyByI(),
            type: this.fun.getTyep()
          },
          "加载中"
        )
        .then(
          (response) => {
            if (response.result == 1) {
              console.log(response.data);
              this.credit1 = response.data.credit1;
              this.transfer = response.data.transfer;
              this.lan_name = response.data.lan_name;
              this.transfer_integral = response.data.transfer_integral;
              this.transfer_integral_love = response.data.transfer_integral_love;
            } else {
              this.$dialog.alert({ message: response.msg });

            }
          },
          (response) => {
            this.$dialog.alert({ message: response.msg });
          }
        );
    },
    submit() {
      this.loading = true;
      let params = {};
      if(this.loveByMember) {
        params.transfer_point = parseFloat(this.transfer_point);
        params.urlApi ='finance.point-exchange-love.index';
        params.attribute = 'exchange_num';
      } else {
        params.transfer_point = this.transfer_point;
        params.urlApi ='finance.point-transfer-integral.index';
        params.attribute = 'transfer_point';
      }
      const attribute = params.attribute;
      $http.post(params.urlApi,{[attribute]: params.transfer_point}).then(res => {
        this.loading=false;
        if(res.result){
          this.$toast(res.msg);
          this.transfer_point= 0;
          this.loveByMember?this.getLoveData():this.getData();
          setTimeout(() => {
            this.$router.go(-1);
          },1000);
        }else{
          this.$toast(res.msg);
        }
      });

    }
  }
}
</script>
<style lang="scss" scoped>
#member-transfer-integral {
  .btn {
    border-radius: 0.375rem;
    overflow: hidden;
    margin-top: 1.5625rem;
  }

  .main {
    position: relative;
    height: 7.5rem;
    padding: 0 0.5938rem;
    background: linear-gradient(#ffc11e, #ffc222, #fadc8c, #f9e6b5);
  }

  .popup {
    background: #fff;
    border-radius: 5px;
    position: absolute;
    top: 45%;
    left: 0.5938rem;
    right: 0.5938rem;
    padding: 1.2813rem 1.25rem 1.25rem 1.3438rem;
  }

  .left {
    text-align: left;
  }

  .f-13 {
    font-size: 0.8125rem;
  }

  .current_integral {
    font-size: 0.875rem;
    color: #333;
    text-align: left;
    padding-top: 0.875rem;
  }

  ::v-deep .van-nav-bar__content {
    background: #ffc11e;
  }

  ::v-deep .van-button--default {
    background: #ffc11e;
  }

  .tips {
    text-align: left;
    font-size: 0.75rem;

    p {
      margin-top: 0.375rem;
      margin-bottom: 0.1875rem;
    }
  }

  .c-9B9B9B {
    color: #9b9b9b;
  }

  .line {
    background: #e7e7e7;
    height: 1px;
    width: 100%;
  }

  ::v-deep .van-cell {
    padding: 10px 0 !important;
  }
}
</style>